
<template>
    <div class="herb-land-ingringr-interact-comp">
         <TitleBox type=2>
            <template #titlecont>
                <span v-lang="{lang: controlSto.language, lgid: -68}">Ingredient-ingredient interactions</span>
            </template>
        </TitleBox>
        <!-- TODO 就switch-box -->
        <div class="cont-box">
            <div class="plane-box">
                <div class="switch-box">
                    <div class="switch-wrap">
                        <div class="switch-item" :class="{'switch-item-on': dataObj.xxxx1 == 1}" @click.stop="cghXXXX1(1)">
                                <span v-lang="{lang: controlSto.language, lgid: -60}">Network</span>
                        </div>
                        <div class="switch-item" :class="{'switch-item-on': dataObj.xxxx1 == 2}" @click.stop="cghXXXX1(2)">
                            <span v-lang="{lang: controlSto.language, lgid: -61}">Heatmap</span>
                        </div>
                        <div class="switch-item" :class="{'switch-item-on': dataObj.xxxx1 == 3}" @click.stop="cghXXXX1(3)">
                                <span v-lang="{lang: controlSto.language, lgid: -62}">Table</span>
                        </div>
                    </div>
                </div>
                <div class="switch-cont-box" v-if="dataObj.xxxx1 == 1">
                    
                </div>
                <div class="switch-cont-box" v-if="dataObj.xxxx1 == 2">
                    
                </div>
                <div class="switch-cont-box" v-if="dataObj.xxxx1 == 3">
                    <uiTable
                        :config="dataObj.tableConfig"
                        :columnConfig="dataObj.columnConfig" 
                        :data="dataObj.dataList"
                        :loading="isLoading"
                        :key="dataObj.searchTablevt">
                    </uiTable>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, reactive, toRefs, computed, onBeforeMount, watch } from 'vue'
    import TitleBox from '@/components/TitleBox.vue'
    import uiTable from '@/components/ui-table.vue'
    // import SearchBtn from '@/components/SearchBtn.vue'

    import { langTxt, getFilterThArr, getFilterLangArr } from '@/utils/util'
    import { getTableThList, getHerbIngringrInteract } from '@/service/tcm'

    import { controlStore } from '@/stores/control'
    import { debounce } from 'lodash'
    
    const emitter = defineEmits(['toCalc']);
    const props = defineProps({
        detailId: {
            type: [Number, String],
            default: ''
        }
    });
    const { detailId } = toRefs(props);
    
    let searchDebounce = null;

    const controlSto = controlStore();
    const isLoading = ref(true);

    const condObj = reactive({
		// searchword: '',
		filterKey: 'pres6',
		filterKey: 'herb6',
        uiCode: 'herb_ingredient_ingredient_interactions',
        // total: 0,
        // pageSize: 10,
        // pageIndex: 1,
	});

	const dataObj = reactive({
		xxxx1: 3, // 1:Network  2:Heatmap  3:Table
		searchTablevt: 1,
		tableConfig: {
			// size: 'small',
			'tooltip-effect': 'dark',
			'highlight-current-row': true,
			stripe: true,
			'header-cell-style': { background: '#BC9F77', color: '#FFF' },
		},
		columnConfig: [],
		dataList: []
	});

    const searchPlace = computed(() => {
		return langTxt(controlSto.language, '-15');
	});

    onBeforeMount(()=> {
        initDebounce();
		getTableTh();
        toGetData();
    });

    const initDebounce = () => {
        searchDebounce = debounce((e) => {
           getDataList();
        }, 400);
    };

    const getTableTh = () => {
        let params = {
            uiCode: condObj.uiCode,
            langCode: 'ENG,CHN'
        };
        getTableThList(params).then((res) => {
            if (res.success) {
                let arr = res.data || [];
                let thArr = getFilterThArr(arr, dataObj.filterKey);
        		let langArr = getFilterLangArr(thArr);
        		controlSto.setLangList(langArr);
        		dataObj.columnConfig = thArr;
                emitter('toCalc');
            }
        }).catch(() => {});

        // let thArr = getFilterThArr(arr, condObj.filterKey);
        // let langArr = getFilterLangArr(thArr);
        // controlSto.setLangList(langArr);
        // // dataObj.columnList = thArr;
        // dataObj.columnConfig = thArr;
    };

    // const chgTableCol = (e) => {
	// 	dataObj.columnConfig = e || [];
	// 	dataObj.searchTablevt = new Date().valueOf();
    //     emitter('toCalc');
    // };

    
    const toGetData = () => {
        searchDebounce && searchDebounce();
    };

    const getDataList = () => { // getHerbIngringrInteract
        let params = {
            langCode: controlSto.language == 1 ? 'ENG' : 'CHN',
            herbId: detailId.value,
            // content: condObj.word,
            uiTypeCode: condObj.uiCode,
			pageNo: condObj.pageIndex || 10,
			pageSize: condObj.pageSize || 1
        };
        isLoading.value = true;
        getHerbIngringrInteract(params).then((res) => {
            isLoading.value = false;
            if (res.success && res.data && res.data.records) {
                dataObj.dataList = res.data.records || [];
                condObj.total = res.data.totalCount || 0;
            }
        }).catch(() => {
            isLoading.value = false;
        });

        emitter('toCalc');
    };

    const cghXXXX1 = (i) => {
		if(dataObj.xxxx1 !== i) {
			dataObj.xxxx1 = i;
            emitter('toCalc');
		}
    };


    
    // watch(() => controlSto.language, (n, v) => {
    //     if(n != v) {
    //         toGetData();
    //     }
    // }, { immediate: true });


        



</script>


<style lang="scss" scoped>
    .herb-land-ingringr-interact-comp {
        .cont-box {
            .plane-box {
                padding-top: 32px;
            }
            .switch-box {
				padding-bottom: 32px;
				text-align: center;
				.switch-wrap {
					display: inline-block;
					border: 1px solid #BC9F77;
					border-radius: 30px;
					font-size: 0;
					color: #967846;
					.switch-item {
						display: inline-block;
						height: 40px;
						width: 200px;
						padding: 0 32px;
						line-height: 40px;
						border-right: 1px solid #BC9F77;
						font-weight: 600;
						font-size: 18px;
						cursor: pointer;
						&:first-child {
							// border-radius: 30px;
							border-top-left-radius: 16px;
							border-bottom-left-radius: 16px;
						}
						&:last-child {
							border-right: none;
							border-top-right-radius: 16px;
							border-bottom-right-radius: 16px;
						}
						&.switch-item-on {
							color: #fff;
							background-color: #BC9F77;
						}
					}
				}

			}
        }
    }
</style>
